<template>
    <div class="ResumeCnki">
      <h4 class="result" v-if="messages">
        {{$t('candidateApplication.checked_result')}}：<span :class="searchBtn ? 'red' : 'green'">{{messages}}</span>
      </h4>
      <a-form :form="form" class="formData" v-if="switchConfig">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :label="$t('common.name')">
              <a-input :disabled="!searchBtn" v-decorator="['name',{rules: [{ required: true, message: `${$t('common.pleaseEnter')}${$t('common.name')}！` }]}]" :placeholder="$t('common.name')"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item :label="$t('common.mobile')">
              <MobileInternational :isDisabled="!searchBtn" v-decorator="['mobile',{rules: [{ required: true, validator: validate.internationalPhone }]}]" :placeholder="$t('common.mobile')"/>
              <!-- <mobile-international v-decorator="['mobile',{rules: [{ required: true, message: '请填入电话！' }]}]" placeholder="电话"/> /^1[34578]\d{9}$/-->
              <!-- <a-input :disabled="!searchBtn" v-decorator="['mobile',{rules: [{ required: true, pattern: /^1[3456789]\d{9}$/, message: `${$t('common.please_correct_enter')}${$t('common.mobile')}！` }]}]" :placeholder="$t('common.mobile')"/> -->
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label="$t('common.email')">
              <a-input :disabled="!searchBtn" v-decorator="['email',{rules: [{type: 'email',message: `${$t('common.please_correct_enter')}${$t('common.email')}！`,}, { required: true, message: `${$t('common.pleaseEnter')}${$t('common.email')}！` }]}]" :placeholder="$t('common.email')"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template v-if="!searchBtn">
        <a-spin tip="上传文件..." :spinning="spinning">
          <com-up-load v-if="positionInfo.isRPO === 'Y' && !switchConfig" :switchConfig="switchConfig" :loading="loading" @upFile="data => $emit('upFile', data)" @loading="flag => $emit('loading', flag)"/>
          <single-up-load v-else :switchConfig="switchConfig" :loading="loading" @upFile="data => $emit('upFile', data)" @loading="flag => $emit('loading', flag)"/><!--v-else -->
        </a-spin>
      </template>
      <p class="btn" v-else>
        <a-button type="primary" @click="searchResume" :loading="chekedLoading || spinning">{{$t('candidateApplication.resume_checked')}}</a-button>
      </p>
    </div>
</template>
<script>
import validate from '@/util/validate'
import MobileInternational from '@/components/formComponents/MobileInternational/MobileInternational'
import singleUpLoad from '@/components/resume/singleUpLoad'
import ComUpLoad from '@/components/resume/ComUpLoad'
import { mapState } from 'vuex'
import { fileSave, batchFileSave } from '@/api/resume'
export default {
  name: 'ResumeCnki',
  components: { MobileInternational, singleUpLoad, ComUpLoad },
  props: ['searchBtn', 'messages', 'chekedLoading', 'switchConfig', 'loading', 'basicData', 'positionInfo'],
  data () {
    return {
      validate,
      form: this.$form.createForm(this),
      mobilePartten: false,
      spinning: false,
      fileName: '',
      fileSize: ''
    }
  },
  watch: {
    searchBtn: {
      handler (newValue, oldValue) {
        if (oldValue) {
          this.fileName = ''
          this.fileSize = ''
        }
      }
    }
  },
  mounted () {
    if (JSON.stringify(this.basicData) !== '{}') {
      this.form.setFieldsValue(this.basicData)
    }
  },
  computed: {
    ...mapState({
      Authorization: function (state) {
        let token = state.common.loginInfo && state.common.loginInfo.token
        return token
      }
    })
  },
  methods: {
    async getFileListSave (data) {
      return new Promise(async (resolve, reject) => {
        let params = data
        params.isRPO = this.positionInfo.isRPO || 'N'
        let res = await batchFileSave(params)
        if (res && res.code === 200) {
          resolve(res)
        } else {
          res && this.$message.error(res.message)
          reject(res)
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    async getFileSave (fileData, basicData) {
      return new Promise(async (resolve, reject) => {
        let params = {
          // filePath: this.filePath
          ...fileData
        }
        let res = await fileSave(params)
        if (res && res.code === 200) {
          if (!res.data.basic) {
            res.data = {
              name: basicData.name,
              email: basicData.email,
              mobile: basicData.mobile
            }
          } else {
            res.data.basic.name = basicData.name || res.data.basic.name
            res.data.basic.email = basicData.email || res.data.basic.email
            res.data.basic.mobile = basicData.mobile || res.data.basic.mobile
          }
          resolve(res)
        } else {
          res && this.$message.error(res.message)
          reject(res)
        }
      }).catch((e) => {
        console.log(e)
      })
    },
    resumeChecks () {
      return new Promise((resolve, reject) => {
        this.form.validateFields((error, values) => {
          if (!error) {
            // 处理数据
            resolve(values)
          } else {
            reject(error)
          }
        })
      }).catch((e) => {
        console.log(e)
      })
    },
    searchResume () {
      this.$emit('searchResume')
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../styles/var.styl'
.ResumeCnki
  position relative
  .ant-upload-hint
    span
      display block
      padding 0 12px
      font-size 12px
  .nobd
    border none!important
  .formData
    padding 0 24px
  .red
    color errorColor
  .green
    color lightGreen
  .uploadFile
    border-top 1px solid borderColor
    text-align center
    padding 24px 0
    >span
      display flex
      justify-content center
    :global(.ant-upload.ant-upload-drag)
      width 65%
      height 65%
    &.grey
      display flex
      justify-content center
      p
        text-align left
      >div
        background eeeGrey
        border-radius 4px
        height 149px
        width 60%
        display flex
        align-items center
        justify-content center
        padding 12px
        i
          color var(--blue-500)
          font-size 36px
          margin-right 4px
        .resumename
          display flex
          align-items center
          width 50%
          margin-right 72px
          div
            width 100%
            display flex
            justify-content center
            flex-direction column
          .elip
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
  .btn
    text-align center
    padding 24px 0 48px 0
    >button
      width 150px
  .result
    font-weight bold
    line-height 40px
    position absolute
    top 0
    right 24px
</style>
